<template>
  <div
    :style="{
      textAlign: computedState.position as CSSProperties['textAlign'],
    }"
  >
    <MaterialsHeader
      :serial-num="serialNum"
      :title="computedState.title"
      :desc="computedState.desc"
      :title-size="computedState.titleSize"
      :title-weight="computedState.titleWeight"
      :title-itatic="computedState.titleItatic"
      :title-color="computedState.titleColor"
      :desc-size="computedState.descSize"
      :desc-weight="computedState.descWeight"
      :desc-itatic="computedState.descItatic"
      :desc-color="computedState.descColor"
    />
    <div>
      <el-checkbox-group v-model="selectedOptions" class="flex flex-wrap gap-2 p-0">
        <el-checkbox
          class="flex flex-col-reverse h-auto m-0 gap-2"
          v-for="(item, index) in computedState.options"
          :key="index"
          :value="item.picTitle"
        >
          <PictureUploadRadio :key="index" v-bind="{ ...item, index }" />
        </el-checkbox>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { IJsonSchemaStatusBase } from "@/types/editProps";
import PictureUploadRadio from "@/components/SurveyComs/MaterialItems/Common/PictureUploadRadio.vue";
import MaterialsHeader from "@/components/SurveyComs/MaterialItems/Common/MaterialsHeader.vue";
import {
  getActiveCurrentStatus,
  getActiveCurrentStatusIndex,
  getPicTitleDescStatusArr,
  getTextStatus,
} from "@/utils/tools";
import type { CSSProperties } from "vue";

const props = defineProps<{
  serialNum: number;
  status: IJsonSchemaStatusBase;
}>();

const selectedOptions = ref<string[]>([]);

const computedState = computed(() => ({
  title: getTextStatus(props.status.title)!,
  desc: getTextStatus(props.status.desc)!,
  options: getPicTitleDescStatusArr(props.status.options!),
  position: getActiveCurrentStatus<"position">(props.status.position).value,
  titleSize: getActiveCurrentStatus<"titleSize">(props.status.titleSize),
  titleWeight: getActiveCurrentStatus<"titleWeight">(props.status.titleWeight)
    .value,
  titleItatic: getActiveCurrentStatusIndex(props.status.titleItatic)!,
  titleColor: getTextStatus(props.status.titleColor)!,
  descSize: getActiveCurrentStatus<"descSize">(props.status.descSize),
  descWeight: getActiveCurrentStatus<"descWeight">(props.status.descWeight)
    .value,
  descItatic: getActiveCurrentStatusIndex(props.status.descItatic)!,
  descColor: getTextStatus(props.status.descColor)!,
}));

defineOptions({
  meta: {
    title: "图片复选",
    __isRouteComponent: true,
    __parentPath: "/src/views/Materials/parts/ChoosePart.vue",
  },
});
</script>

<style scoped></style>
